<template>
	<view class="container">
		<!-- 投诉建议 -->
		<view>
			<card20 :isBorder="true" v-for="item in suggest" :title="item.title" class="mt-2"
				@click="GoComplaint(item)">
				<template v-slot:main-title>
					<image
						src="https://cdn7.axureshop.com/demo/1996612/images/%E9%97%AE%E5%8D%B7%E8%B0%83%E6%9F%A5/u7954.svg" />
				</template>
				<template v-slot:main>
					<view style="margin: 5rpx 0;">{{ item.main }}</view>
				</template>
				<template v-slot:fu-title>
					<text :style="{ color: item.extra == '去参与' ? '#33a9db' : '#ccc' }">{{ item.extra }}</text>
				</template>
				<template v-slot:fu-icon>
					<image v-if="item.extra == '去参与'" src="../../static/image/箭头.png" mode="scaleToFill"
						style="width: 30rpx ; height: 30rpx;vertical-align: middle;margin-top: -10rpx;" />
				</template>
				<template v-slot:floot-left>
					<view class="rep-foot">
						<view class="rep-foot-item">
							<text>{{ item.flootLeft }}</text>
						</view>
					</view>
				</template>
				<template v-slot:floot-right>
					<view class="rep-foot">
						<view class="rep-foot-item">
							<text>{{ item.flootRight }}</text>
							<view style="margin: 15rpx 0; ">{{ item.flootCont }}</view>
						</view>
					</view>
				</template>
			</card20>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import card20 from '../../components/card-2.0.vue';
let suggest = ref([
	{
		title: "关于提升物业服务的调查",
		extra: "去参与",
		main: "为提升广大业主享受物业服务，物业部门做了一系列的服务规划，现邀请业主参与调查，我们将根据调查结果优化服务举措，提升业主满意度。",
		flootLeft: "调查截止日期",
		flootRight: "2022-02-2818:00",
		flootCont: "花园国际小区物业服务处"
	},
	{
		title: "关于端午节活动的调查",
		extra: "已结束",
		main: "为拓展广大业主业余活动，在端午来临之际，物业服务部计划了几项活动，现由广大业主投票选择，投票最多的将作为端午节活动内容。",
		flootLeft: "2022-02-1218:25:47",
		flootRight: "花园国际小区",
		flootCont: "花园国际小区物业服务处"
	},
])
let GoComplaint = (item) => {
	if (item.extra == '去参与') {
		uni.navigateTo({
			url: '/pages/survey/components/detailsSurvet'
		})
	}

}
</script>

<style lang="scss">
.container {
	height: calc(100vh - 90rpx);
	box-sizing: border-box;
	background-color: #f5f5f5;
	font-family: '微软雅黑', sans-serif;
	font-weight: 400;
}

.mt-2 {
	float: left;
	font-size: 22rpx;

	image {
		width: 40rpx;
		height: 40rpx;
		vertical-align: middle;
		margin-top: -5rpx;
		margin-right: 10rpx;
	}
}

.rep-foot {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-between;

	.rep-foot-item {
		// display: flex;
		// flex-direction: row;
		width: 100%;
		height: 80rpx;
		align-items: center;
		justify-content: center;

		image {
			width: 40rpx;
			height: 40rpx;
			vertical-align: middle;
		}
	}
}

.Addmt-2 {
	width: 100rpx;
	height: 100rpx;
	position: fixed;
	bottom: 100rpx;
	right: 45%;
	background-color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 10rpx 0 #03a7f0;

	image {
		width: 50rpx;
		height: 50rpx;
	}
}
</style>
